<?php
include_once("../includes/common.php");
include_once("../class/User.class.php");
include_once("../class/Explore.class.php");
require_once("../islogin.php");

if ($isadmin!=1){
    header('Location: /');
    exit;
}

$menuavatar = !$user_info["message"]["avatar"] ? "/data/avatar/default.jpg" : $user_info["message"]["avatar"];
$pageName = "笔记预览";

$check_menu = true;

$explore = new Explore();
if($_GET['nid']){
    $res = json_decode($explore->getIdNotes($_GET['nid']),true);
    $statist = json_decode($explore->getNoteStatistics($_GET['nid']),true);
    if(!$res){
        //header('Location: note_control.php');
        exit('不存在的nid');
    }
    //var_dump($res);
    $note_type = $res['note_type'];
    $image_paths = explode(',', $res['image']); // 分隔图片路径

}else{
    exit('不存在nid');
}

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <?php require_once('head.php'); ?>
    <style>
        .note_pic {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 4px; /* 控制图片之间的间距 */
        }

        .note_pic img {
            width: 100%;
            height: 160px; /* 固定高度 */
            object-fit: cover;
            border-radius: 8px;
        }
        .video-container{
            max-width: 430px;
        }
        .video-container video{
            max-height: 2000px;
        }


    </style>
</head>
<body>
    
<!--==================== Preloader Start ====================-->
  <div class="preloader">
    <div class="loader"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="side-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<?php require_once('menu.php'); ?>
    <div class="dashboard-main-wrapper">
        <?php require_once('top_navbar.php'); ?>
        <div class="dashboard-body">


            <div class="row gy-4">
                <div class="col-xxl-12">
                    <!-- Course Card Start -->
                    <div class="card">
                        <div class="card-body p-lg-20 p-sm-3">
                            <div class="flex-between flex-wrap gap-12 mb-20">
                                <div>
                                    <h3 class="mb-4"><?php echo $res['title']?></h3>
                                </div>

                            </div>

                                <?php if ($note_type == 0): ?>
                            <div class="rounded-16 overflow-hidden note_pic">
                                    <?php foreach ($image_paths as $image_path): ?>
                                        <a href="<?php echo (strpos($image_path, '/') === 0)? $image_path : '/'. $image_path;?>" target="_blank">
                                            <img src="<?php echo (strpos($image_path, '/') === 0)? $image_path : '/'. $image_path;?>" alt="Image" />
                                        </a>
                                    <?php endforeach; ?>
                            </div>
                                <?php else: ?>
                            <div class="rounded-16 overflow-hidden video-container">
                                    <video id="player" class="player" playsinline controls data-poster="<?php echo getFirstValidImage($res['image'])?>">
                                        <source src="<?php echo getMp4Files($image_paths)?>" type="video/mp4">
                                    </video>
                                </div>
                                <?php endif; ?>

                            <div class="mt-24">
                                <div class="border-gray-100">
                                    <h5 class="mb-12 fw-bold">笔记正文：</h5>
                                    <p class="text-gray-300 text-15 mb-8"><?php echo $res['content']?></p>
                                    <p class="text-gray-300 text-15 mb-8">关键词：<?php echo $res['tags']?></p>

                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- Course Card End -->

                </div>


            </div>
        </div>


        <?php require_once('footer.php'); ?>
    </div>

<?php require_once('foot.php'); ?>
<script src="/static/js/message.min.js"></script>
<?php if (isset($_GET['msg'])){?>
<script>
    Qmsg.success('你已成为审核官，开启审核之路吧！');
</script>
<?php }?>

<script>
    function submitCheckResult(result) {
        const noteId = "<?php echo $res['note_id']; ?>";
        const sign = "<?php echo $sign; ?>";
        window.location.href = `/control/check_note.php?check_res=${result}&sign=${sign}&nid=${noteId}`;
    }

    // Plyr Js Start
    const player = new Plyr('#player');
    const featuredPlayer = new Plyr('#featuredPlayer');
    // Plyr Js End

    $('.delete-item-btn').on('click', function () {
        $(this).closest('.upload-card-item').addClass('d-none')
    });


    // ========================= Social Share Js Start ===========================
    $('.share-social__button').on('click', function(event) {
        event.stopPropagation();
        $(this).addClass('active');
        $('.share-social__icons').toggleClass('show')
    });

    $('body').on('click', function(event) {
        $('.share-social__icons').removeClass('show');
        $('.share-social__button').removeClass('active');
    });

    // For device width size js start
    // let screenSize = screen.width
    // alert(' Your Screen Size is: ' + screenSize + 'pixel');
    // For device width size js start

    let socialShareBtn = $('.share-social');
    // Check if the element exists
    if (socialShareBtn.length > 0) {
        let leftDistance = socialShareBtn.offset().left;
        let rightDistance = $(window).width() - (leftDistance + socialShareBtn.outerWidth());

        if (leftDistance < rightDistance) {
            $('.share-social__icons').addClass('left');
        }
    }
    // ========================= Social Share Js End ===========================

    // Bookmark js Start
    $('.bookmark-icon').on('click', function () {
        $(this).toggleClass('active');
        let icon = $(this).children('i');

        if($(this).hasClass('active')) {
            icon.removeClass('ph ph-bookmarks');
            icon.addClass('ph-fill ph-bookmarks text-main-600');
        } else {
            icon.removeClass('ph-fill ph-bookmarks');
            icon.addClass('ph ph-bookmarks');
        }
    });
    // Bookmark js End
</script>
    </body>
</html>